import React, {Component} from 'react'
import {Breadcrumb, Table, Tabs, InputNumber, Card, Space,Input} from 'antd'
import {withRouter } from 'react-router-dom';
import PieChart from './PieChart'
import  './subpageStyle.scss'

const { Column } = Table;

const exchangeRecordCol = [  // 交换记录
    {
        title: '序号',
        key: 'index',
        render: (text, record, index)=><span>{index+1}</span>
    },
    {
        title: '任务编码',
    },
    {
        title: '资源编码',
    },
    {
        title: '源数据库',
    },{
        title: '源表'
    },{
        title: '抽取数据量'
    },{
        title: '目标库'
    },{
        title: '目标表'
    },{
        title: '入库数据量'
    },{
        title: '触发时间'
    }
]

const extractCol = [ // 抽取记录  抽取异常
    {
        title: '序号',
        key: 'index',
        render: (text, record, index)=><span>{index+1}</span>
    },
    {
        title: '任务编码',
    },
    {
        title: '资源编码',
    },
    {
        title: '源数据库',
    },{
        title: '源表'
    },{
        title: '抽取数据量'
    },{
        title: '触发时间'
    }
]

const warehousingCol = [  // 入库记录 入库异常
    {
        title: '序号',
        key: 'index',
        render: (text, record, index)=><span>{index+1}</span>
    },
    {
        title: '任务编码',
    },
    {
        title: '资源编码',
    },
    {
        title: '目标库'
    },{
        title: '目标表'
    },{
        title: '入库数据量'
    },{
        title: '触发时间'
    }
]

@withRouter
class Monitor extends Component{
    constructor(props){
        super(props);
        this.state={
            exchangeColumns:[
                {
                    title: '序号',
                    key: 'index',
                    render: (text, record, index)=><span>{index+1}</span>
                },
                {
                    title: '任务编码',
                },
                {
                    title: '资源编码',
                },
                {
                    title: '源数据库',
                },{
                    title: '源表'
                },{
                    title: '抽取数据量'
                },{
                    title: '目标库'
                },{
                    title: '目标表'
                },{
                    title: '入库数据量'
                },{
                    title: '触发时间'
                }
            ],
            page: 1,
        }
    }

    componentDidMount(){
       
    }

    handleRecordStatsChange = (key) => {
        let that = this
        switch(key){
            case '1': that.setState({exchangeColumns: exchangeRecordCol}); break;
            case '2': that.setState({exchangeColumns: extractCol}); break;
            case '3': that.setState({exchangeColumns: warehousingCol}); break;
            case '4': that.setState({exchangeColumns: extractCol}); break;
            case '5': that.setState({exchangeColumns: warehousingCol}); break;
            default: return;
        }
    }

    getChartData = (type) => {
        var chartData = {
            title: '',
            data: [],
        }

        switch(type){
            case 'memory': chartData.title="内存总量\n16GB"; 
                            chartData.data=[{
                                value: 6,
                                name: '可用',
                            },
                            {
                                value: 10,
                                name: '已使用',
                            },];
                             break;
            case 'disk': chartData.title="磁盘总量\n700GB"; 
                        chartData.data=[{
                            value: 220,
                            name: '可用',
                        },
                        {
                            value: 480,
                            name: '已使用',
                        },];
                        break;
            case 'CPU': chartData.title="CPU\n8核"; 
                        chartData.data=[{
                            value: 0.68,
                            name: '可用',
                        },
                        {
                            value: 0.32,
                            name: '已使用',
                        }];
                        break;
            default: break;
        }

        return chartData;
    }

    render(){
        const {page} = this.state;
        const record = this.props.location.query ? [this.props.location.query.record] : []
        return(
            <div className={'content'}>
                <Breadcrumb separator=">">
                    <Breadcrumb.Item href="#/dataCollection/task">数据采集任务列表</Breadcrumb.Item>
                    <Breadcrumb.Item>任务信息监视</Breadcrumb.Item>
                </Breadcrumb>
                <div className='monitorTitle'>任务信息总览</div>
                    <Table dataSource={record} pagination={{hideOnSinglePage:true}}>
                        <Column title="序号" render={(text, record, index)=><span>{index+1}</span>} width="10%"/>
                        {/* <Column title="服务编号" dataIndex="taskId" key="taskId"/> */}
                        <Column title="服务名称" dataIndex="taskName" key="taskName" width="15%"/>
                        <Column title="采集周期" dataIndex="taskTypeName" key="taskTypeName" width="15%"/>
                        <Column title="运行状态" dataIndex="taskStatus" key="taskStatus" width="15%"/>
                        <Column title="创建时间" dataIndex="createDate" key="createDate" width="20%"/>
                    </Table>
                <div className='monitorTitle'>交换情况统计</div>
                <Tabs type="card" onChange={this.handleRunStatsChange}>
                    <Tabs.TabPane tab="最近一次运行" key="1" />
                    <Tabs.TabPane  tab="累计运行" key="2" />
                </Tabs>
                <Space size={"large"}>
                    <Card style={{background: 'rgba(52, 152, 219, 1)'}}><p>1000</p><p>抽取数据量</p></Card>
                    <Card style={{background: 'rgba(15, 206, 150, 1)'}}><p>1000</p><p>入库数据量</p></Card>
                    <Card style={{background: 'rgba(79, 193, 176, 1)'}}><p>1000</p><p>异常数据量</p></Card>
                    <Card style={{background: 'rgba(22, 160, 133, 1)'}}><p>1000</p><p>异常次数</p></Card>
                </Space>
                <Tabs style={{marginTop: "20px"}} type="card" onChange={this.handleRecordStatsChange}>
                    <Tabs.TabPane tab="交换记录" key="1" />
                    <Tabs.TabPane  tab="抽取记录" key="2" />
                    <Tabs.TabPane  tab="入库记录" key="3" />
                    <Tabs.TabPane  tab="抽取异常" key="4" />
                    <Tabs.TabPane  tab="入库异常" key="5" />
                </Tabs>
                <Table columns={this.state.exchangeColumns} pagination={{pageSize:page,showSizeChanger:false}}/>
                {/* <div className={this.props.data.length>0 ? 'footer' : 'withoutPagination'}> */}
                <div className={'withoutPagination'}>
                显示<InputNumber min={1} defaultValue={page} onChange={this.changePage}/>项结果，共{0}项
                </div>
                <div className='monitorTitle'>当前/最近一次任务节点信息情况</div>
                <Space size="large">
                    <PieChart id="memory" chartData={this.getChartData('memory')}/>
                    <PieChart id="disk" chartData={this.getChartData('disk')} />
                    <PieChart id="CPU" chartData={this.getChartData('CPU')} />
                </Space>
            </div>
        )
    }
}

export default Monitor;